<template>
  <div id="circelCard">
    <p v-if="title" class="title">{{title}}</p>
    <!-- 圆角卡片组件 -->
    <Card class="cardclass">
      <div style="text-align:center">
        <!-- 顶部图片大图 -->
        <img :src="imgURL" class="imgURLclass" />
        <!-- 两个列表 -->
        <List size="large" :split="false">
          <router-link v-for="(item,index) in itemList" :key="index" :to="item.link">
              <!-- 列表内的局部元素 -->
            <ListItem>
              <template>
                <!-- 列表内的首部图片 -->
                <img :src="item.uimg" class="uimgclass" />
              </template>
              <!-- 列表内的标题下标描述 -->
              <ListItemMeta avatar :title="item.utitle" :description="item.udesc" class="mateclass"></ListItemMeta>
              <template slot="extra">
                <!-- 尾部箭头图标 -->
                <Icon type="ios-arrow-forward" class="icoclass" />
              </template>
            </ListItem>
          </router-link>
        </List>
      </div>
    </Card>
  </div>
</template>

<script>
//导入vue
import Vue from "vue";
//导入iview-ui 卡片,列表,icon图标
import { Card, List, ListItem, ListItemMeta, Icon } from "view-design";

export default {
  name: "circelCard",
  //传入属性名
  props: ["title", "imgURL", "itemList"],
  //iview-ui注册组件
  components: {
    Card,
    List,
    ListItem,
    ListItemMeta,
    Icon
  },
  data() {
    return {};
  },

  computed: {},

  watch: {},

  methods: {},

  created() {

  },

  mounted() {
    //首次挂载调整 局部css样式 这对局部UI做了些修改
    let tempcard = document.getElementsByClassName("ivu-card-body");
    for (let i = 0; i < tempcard.length; i++) {
      tempcard[i].style = "padding:0px";
    }

    let tempdesc = document.getElementsByClassName(
      "ivu-list-item-meta-description"
    );
    for (let i = 0; i < tempdesc.length; i++) {
      tempdesc[i].style = "font-size: 12px";
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
/* 局部和组件的局部样式修改 */
.title {
  margin: 10px 8%;
  font-size: 18px;
  color: #333;
  font-family: PingFangSC-Medium;
}
.cardclass {
  width: 90%;
  margin: 0 auto 20px;
  border-width: 0px;
}
.imgURLclass {
  /* width:335px; */
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.uimgclass {
  width: 80px;
  height: 60px;
  margin-left: 15px;
}
.mateclass {
  text-align: left;
  margin-left: 15px;
}
.icoclass {
  margin: 25px 10px 0 0;
}
</style>